<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />

<!-- 基础路径 给所有的路径加上向上一级目录 -->
<base href="../"> 

<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<link href="css/showpage.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        
        <div class="header-info">
            <div class="login-info" v-if="isLogin">
            	<a href="front/user.html" title="个人信息">欢迎，{{memberInfo.nickName}}</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="login-info" v-else>
            	<a href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                	<!-- ref -->
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" ref="gname" id="search"/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>
            
            <div class="search_item" id="search_item">
            	<!-- TODO v-for 循环渲染商品类型 -->
            	<!-- <a href="#" class="selected">全部</a>
            	<a href="#">干果</a>
                <a href="#">麻辣</a>
                <a href="#">水果</a>
                <a href="#">饼干</a>
                <a href="#">奶制品</a>
                <a href="#">饮料</a>
                <a href="#">干果</a>
                <a href="#">麻辣</a>
                <a href="#">水果</a> -->
                <a href="javascript:void(0)" class="selected" @click="findByTno(0,'')">全部</a>
                <a href="javascript:void(0)" v-for="(type, index) in types" 
                	@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{ type.tname }}</a>
            </div>
        </div>
    </div>
</header>

<div class="slide">
	<ul class="slide_pics">
        <li><a href="" class=""><img src="images/slide01.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide02.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide03.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide04.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide05.jpg" alt="幻灯片"></a></li>
    </ul>
    <div class="prev"></div>
    <div class="next"></div>
    <ul class="points"></ul>
</div>


<article id="app">
    <div class="view_title">
    	<a href="" class="view_price price_down">价格</a>
        <input type="number" id="start_price" class="price_ipt" min="1" ref="sprice"/>
        <span>-</span>
        <input type="number" id="end_price" class="price_ipt" min="1" ref="eprice"/>
    </div>
    
    <div class="view_goods">
    	<ul id="view_goods">
    		<!-- 商品的循环渲染 -->
        	<li class="hot_box" v-for="good in goods">
            	<i class="all_i i_t"></i>
				<i class="all_i i_r"></i>
				<i class="all_i i_b"></i>
				<i class="all_i i_l"></i>
				<!-- :href vue属性绑定 -->
                <a :href="'front/detail.html?'+good.gno" target="_blank" class="hot_warp">
                	<!-- ../pics/1589958138486_1015.jpg -->
                	<img :src="good.pic" title="good.gname"/>
                    <span>{{good.gname}}</span>
                </a>
                <div class="view_info">
                	<span class="price">{{good.price}}</span>
                    <span>/ {{good.weight}}</span>
                    <span class="buy" @click="addCart(good,gno)">&nbsp;</span>
                </div>
            </li>
        </ul>
    </div>
    
   <!-- <div class="page_info">
    	<a href="" class="active">首页</a>
        <a href="" class="active">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">末页</a>
    </div> --> 
    <!-- 新增的分页插件 -->
    <div class="pagination" id="pagination"></div>
</article>
<div class="popup_con">
	<div class="popup">
		<p id="popup_info"></p>
	</div>
</div>  
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/slide.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>

<script src="js/vue/vue.js" type="text/javascript"></script>
<script src="js/vue/axios.js" type="text/javascript"></script>
<script src="js/vue/qs.js" type="text/javascript"></script>

<!-- 引入公共js文件 登录检测 显示用户名 购物信息 类型渲染 -->
<script type="text/javascript" src="js/base.js"></script>


<!-- 引入分页插件 -->
<script type="text/javascript" src="js/showpage.js"></script>
<script type="text/javascript">
	// 当前页码数据和每页显示数
	let page = 1;
	let rows = 2;
	
	// 构建Vue实例
	let vm = new Vue({
		el: "#app",
		data:{
			goods: [],  // 商品集合
			totalPage: 1,  // 总页数
		},
		mounted(){
			// 默认前台首次分页查询
			axios.post("goods/findByFirst", qs.stringify({page, rows})).then(res=>{
				if (res.status == 200 && res.data.code == 200){  // 请求和响应成功
					this.goods = res.data.data.rows;   // 分页后的商品集合
					this.totalPage = Math.ceil(res.data.data.total / rows);  // 向上取整
					
					// 开启分页 先引入showPage.js 调用分页功能showPage(count) + 分页样式 index.css
					$("#pagination").showPage(this.totalPage);
					//console.log(this.goods);
				}
			})
		},
		methods: {
			// TODO 添加购物车 如何区分 购物车不同的商品是新增 还是累计
			addCart(gno){
				alert("商品" + gno + "加入购物车成功...");
			}
			
			
		}
	})
	
	// TODO 使用 showPage.js中29行定义的函数
	function findByPage(index, obj){   // 调用外部分页查询的方法 请求地址 goods/findByPage
		// 获取的查询条件
		page = index;  // 要查询的页码数
		
		let tno = $("#search_item>a[class='selected']").data('tno');   // 获取data-tno属性的值
		// ref 加在普通的元素上 用this.$refs.(ref值)  获取到的是dom元素
		let gname = login.$refs.gname.value;
		let sprice = vm.$refs.sprice.value;
		let eprice = vm.$refs.eprice.value;
		
		// 多条件查询
		axios.post("goods/findByPage", qs.stringify({page, rows, gname, tno, sprice, eprice})).then(res=>{
			if (res.status == 200 && res.data.code == 200){  //请求和响应成功
				vm.$data.goods = res.data.data;   // 获取vue实例对象data属性  // vm.attr 等价于访问 vm.$data.attr
			}
		})
	}

</script>

<!-- 
<script>
function addCart() {
	$("#popup_info").text("加入购物车成功...");
	$('.popup_con').fadeIn('fast', function() {
		setTimeout(function(){
			$('.popup_con').fadeOut('fast',function(){
			});	
		}, 2000)
	});
}
</script> -->
</body>
</html>
